<template>
  <div class="app-container">
    <div class="head_search u-f u-f-ac u-fw">
      <div class="select_box u-f u-f-ac">
        <p class="label font14 text_black agency_name">{{ $t("业务员状态") }}：</p>
        <el-select v-model="clientVal" :placeholder="$t('业务员状态')" @change="clientChange">
          <el-option
            v-for="item in clientArr"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </div>
      <div class="ipt_box u-f u-f-ac" style="width: 290px;">
        <p class="label font14 text_black agency_name">{{ $t("业务员名称") }}：</p>
        <el-input v-model="salesman" placeholder="请输入业务员名称"></el-input>
      </div>
      <div class="ipt_box u-f u-f-ac">
        <p class="label font14 text_black">手机号：</p>
        <el-input v-model="phone" :placeholder="$t('请输入业务员手机号')"></el-input>
      </div>
      <button class="sub_btn font14 text_white bg_blue" @click="getData('search')">{{ $t("提交") }}</button>
    </div>

    <div class="head_options u-f u-f-ac u-fw">
      <button
        class="sub_btn font14 text_white bg_blue"
        @click="addAgent"
        v-if="permissions.indexOf('/agency/employeeAdd') != -1"
      >{{ $t("添加业务员") }}</button>
    </div>

    <div>
      <el-table :data="tableData">
        <el-table-column prop="name" :label="$t('业务员名称')"></el-table-column>
        <el-table-column prop="phone" :label="$t('手机号码')" width="120"></el-table-column>
        <el-table-column prop="brokerage" :label="$t('佣金比例')">
          <template slot-scope="{ row }">
            <span>{{ row.brokerage }}%</span>
          </template>
        </el-table-column>
        <el-table-column prop="status" :label="$t('用户状态')"></el-table-column>
        <el-table-column prop="open_lock" :label="$t('是否可开锁')">
          <template slot-scope="{ row }">
            <span v-if="row.open_lock == 0">{{ $t("否") }}</span>
            <span v-if="row.open_lock == 1">{{ $t("是") }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="is_withdraw" :label="$t('是否允许提现')">
            <template slot-scope="{ row }">
              <span v-if="row.is_withdraw == 0">{{ $t("否") }}</span>
              <span v-if="row.is_withdraw == 1">{{ $t("是") }}</span>
            </template>
          </el-table-column>
        <el-table-column prop="agency_name" :label="$t('归属代理')"></el-table-column>
        <el-table-column prop="withdraw" :label="$t('操作')" width="300" fixed="right">
          <template slot-scope="scope">
            <div class="options_box">
              <el-button
                v-if="permissions.indexOf('/agency/employeeEdit') != -1"
                size="mini"
                type="primary"
                @click="updateAgent(scope.row)"
              >{{ $t("修改") }}</el-button>
              <el-button size="mini" type="success" @click="statistics(scope.row)">{{ $t("统计") }}</el-button>
              <el-button
                v-if="permissions.indexOf('/agency/employeeDelete') != -1"
                size="mini"
                type="danger"
                @click="handleDelete(scope.row)"
              >{{ $t("删除") }}</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>

      <div class="pagination_box">
        <el-pagination
          background
          
          @current-change="handleCurrentChange"
          :current-page="page"
          :page-size="page_size"
          layout="total, prev, pager, next, jumper"
          :total="total"
        ></el-pagination>
      </div>
    </div>

    <!-- 修改 -->
    <el-dialog
      :title="isUpdate ? $t('修改业务员') : $t('添加业务员')"
      width="900px"
      :visible.sync="showAddDialog"
      :close-on-click-modal="false"
    >
      <div class="order_detail">
        <div class="ipt_list u-f u-f-ac">
          <span class="lable font14 text_black">{{$t('业务员名称')}}：</span>
          <el-input v-model="addFrom.salesman" :placeholder="$t('请输入')"></el-input>
        </div>
        <div class="ipt_list u-f u-f-ac">
          <span class="lable font14 text_black">{{$t('业务员手机')}}：</span>
          <el-input v-model="addFrom.phone" :placeholder="$t('请输入')"></el-input>
          <span class="tip font14 text_danger">{{$t('用于登录APP或小程序代理端')}}</span>
        </div>
        <div class="ipt_list u-f u-f-ac">
          <span class="lable font14 text_black">{{$t('登陆密码')}}：</span>
          <el-input v-model="addFrom.password" show-password :placeholder="$t('请输入')"></el-input>
        </div>
        <div class="div_box u-f u-f-ac">
          <p class="lable font14 text_black">{{$t('所属代理')}}：</p>
          <div class="content font14 text_black u-f u-f-ac" @click="openAgentList">
            <p class="text-ellipsis">{{ addFrom.top_agent ? addFrom.top_agent : $t('选择代理') }}</p>
          </div>
          <button class="btn font14 text_white bg_danger" @click="clearAgent">{{$t('清除')}}</button>
        </div>
        <div class="ipt_list u-f u-f-ac">
          <span class="lable font14 text_black">{{$t('佣金百分比')}}：</span>
          <el-input v-model="addFrom.brokerage" :placeholder="$t('请输入')"></el-input>
          <span
            class="tip font14 text_danger"
          >{{$t('必须小于所属代理商分成比')}}（100）{{$t('的整数')}},{{$t('单位')}}%</span>
        </div>
        <div class="radio_list u-f u-f-ac">
          <span class="lable font14 text_black">{{$t('可打开机柜')}}：</span>
          <el-radio v-model="addFrom.open_lock" :label="1">{{$t('是')}}</el-radio>
          <el-radio v-model="addFrom.open_lock" :label="0">{{$t('否')}}</el-radio>
        </div>
        <div class="radio_list u-f u-f-ac">
          <span class="lable font14 text_black">{{$t('是否允许提现')}}：</span>
          <el-radio v-model="addFrom.is_withdraw" :label="1">{{$t('是')}}</el-radio>
          <el-radio v-model="addFrom.is_withdraw" :label="0">{{$t('否')}}</el-radio>
        </div>
        <div class="radio_list u-f u-f-ac">
          <span class="lable font14 text_black">{{$t('状态')}}：</span>
          <el-radio v-model="addFrom.status" :label="1">{{$t('正常')}}</el-radio>
          <el-radio v-model="addFrom.status" :label="2">{{$t('禁用')}}</el-radio>
        </div>

        <el-button type="primary" v-if="!isUpdate" @click="addSubmit">{{$t('提交')}}</el-button>
        <el-button type="primary" v-if="isUpdate" @click="updateSubmit">{{$t('提交')}}</el-button>
      </div>
    </el-dialog>

    <agent-list ref="agentList" :memusid="memusid" :uid="uid" @hide="closeAgentList"></agent-list>
    <agent-stat ref="agentStat"></agent-stat>
    <refresh @click="handleRefresh"></refresh>
  </div>
</template>

<script>
import agentList from "components/agent-list/agent-list.vue";
import agentStat from "components/stat/agent-stat.vue";
import { mapState } from "vuex";
import util from "@/assets/js/util.js";
export default {
  name: "agency-employeeList",
  data() {
    let that = this;
    return {
      page: 1,
      page_size: 20,
      total: 0,
      salesman: "",
      phone: "",
      isUpdate: false,
      showAddDialog: false,
      clientVal: 0,
      clientArr: [
        {
          value: 0,
          label: that.$t("业务员状态")
        },
        {
          value: 1,
          label: that.$t("正常")
        },
        {
          value: 2,
          label: that.$t("禁用")
        }
      ],
      tableData: [],
      addFrom: {
        id: "",
        salesman: "",
        phone: "",
        password: "",
        open_lock: 1,
        is_withdraw: 1,
        status: 1,
        parent_id: "",
        top_agent: "",
        brokerage: ""
      }
    };
  },
  mounted() {
    this.getData();
  },
  components: {
    agentList,
    agentStat
  },
  computed: {
    // ...mapState(["permissions"])
    ...mapState(["permissions", 'equipmentModel', "memusid", "uid", "name"])
  },
  methods: {
    handleRefresh() {
      this.page = 1
      this.page_size = 20
      this.salesman = ''
      this.phone = ''
      this.clientVal = 0
      this.getData()
    },
    getData(type) {
      if(type == 'search') { this.page = 1 }
      util
        .$http("/agency/employeeList1?page=" + this.page, {
          page_size: this.page_size,
          name: this.salesman,
          phone: this.phone,
          status: this.clientVal,
          uid: this.uid
        })
        .then(res => {
          if (res.code == 1) {
            this.total = res.data.total;
            this.tableData = res.data.list;
          }
        });
    },
    addAgent() {
      this.addFrom = {
        id: "",
        salesman: "",
        phone: "",
        password: "",
        open_lock: 1,
        is_withdraw: 1,
        status: 1,
        parent_id: this.uid,
        top_agent: this.name,
        brokerage: ""
      };
      this.isUpdate = false;
      this.showAddDialog = true;
    },
    openAgentList() {
      this.$refs.agentList.show();
    },
    closeAgentList(data) {
      this.addFrom.top_agent = data.name;
      this.addFrom.parent_id = data.id;
    },
    clearAgent() {
      this.addFrom.parent_id = "";
      this.addFrom.top_agent = "";
    },
    clientChange(val) {
      this.clientVal = val;
    },
    handleCurrentChange(val) {
      this.page = Number(val);
      this.getData();
    },
    updateAgent(row) {
      this.isUpdate = true;
      this.showAddDialog = true;
      setTimeout(() => {
        util
        .$http("/agency/employeeDetail", {
          id: row.id
        })
        .then(res => {
          if (res.code == 1) {
            this.addFrom = {
              id: res.data.id,
              salesman: res.data.name,
              phone: res.data.phone,
              password: "",
              open_lock: Number(res.data.open_lock),
              is_withdraw: Number(res.data.is_withdraw),
              status: Number(res.data.status),
              parent_id: res.data.parent_id,
              top_agent: res.data.agency_name,
              brokerage: res.data.brokerage
            };
          }
        });
      }, 150);
    },
    statistics(row) {
      this.$refs.agentStat.show(row.id)
    },
    handleDelete(row) {
      this.$confirm(this.$t("是否要删除当前业务员"))
        .then(() => {
          util
            .$http("/agency/employeeDelete", {
              id: row.id
            })
            .then(res => {
              if (res.code == 1) {
                this.$message({
                  message: res.msg,
                  type: "success"
                });
                this.getData();
              }
            });
        })
        .catch(() => {});
    },
    addSubmit() {
      util
        .$http("/agency/employeeAdd", {
          name: this.addFrom.salesman,
          phone: this.addFrom.phone,
          password: this.addFrom.password,
          parent_id: this.addFrom.parent_id,
          parent_name: this.addFrom.top_agent,
          brokerage: this.addFrom.brokerage,
          open_lock: this.addFrom.open_lock,
          is_withdraw: this.addFrom.is_withdraw,
          status: this.addFrom.status
        })
        .then(res => {
          if (res.code == 1) {
            this.$message({
              message: res.msg,
              type: "success"
            });
            this.isUpdate = false;
            this.showAddDialog = false;
            this.addFrom = {
              id: "",
              salesman: "",
              phone: "",
              password: "",
              open_lock: 1,
              is_withdraw: 1,
              status: 1,
              parent_id: "",
              top_agent: "",
              brokerage: ""
            };
            this.getData();
          }
        });
    },
    updateSubmit() {
      util
        .$http("/agency/employeeEdit", {
          id: this.addFrom.id,
          name: this.addFrom.salesman,
          phone: this.addFrom.phone,
          password: this.addFrom.password,
          parent_id: this.addFrom.parent_id,
          parent_name: this.addFrom.top_agent,
          brokerage: this.addFrom.brokerage,
          open_lock: this.addFrom.open_lock,
          is_withdraw: this.addFrom.is_withdraw,
          status: this.addFrom.status
        })
        .then(res => {
          if (res.code == 1) {
            this.$message({
              message: res.msg,
              type: "success"
            });
            this.isUpdate = false;
            this.showAddDialog = false;
            this.addFrom = {
              id: "",
              salesman: "",
              phone: "",
              password: "",
              open_lock: 1,
              is_withdraw: 1,
              status: 1,
              parent_id: "",
              top_agent: "",
              brokerage: ""
            };
            this.getData();
          }
        });
    }
  }
};
</script>

<style scoped>
.head_search {
  margin-bottom: 20px;
}
.head_search .ipt_box {
  width: 260px;
  margin-right: 20px;
}
.head_search .ipt_box .el-input {
  width: 200px;
}
.head_search .select_box {
  width: 290px;
  margin-right: 20px;
}
.head_search .select_box .el-select {
  width: 200px;
}
.head_search .div_box {
  width: 320px;
  margin-right: 20px;
}
.head_search .div_box .content {
  width: 170px;
  height: 40px;
  padding-left: 15px;
  border: 1px solid #dcdfe6;
  border-radius: 4px 0 0 4px;
  transition: border 0.3s;
  box-sizing: border-box;
}
.head_search .div_box .content:active {
  border-color: #409eff;
}
.head_search .div_box .btn {
  width: 60px;
  height: 40px;
  border: 0;
  outline: 0;
  cursor: pointer;
  border-radius: 0 4px 4px 0;
  box-sizing: border-box;
}
.head_search .switch_box {
  width: 151px;
  margin-right: 20px;
}
.head_search .sub_btn {
  height: 40px;
  border: 0;
  outline: 0;
  padding: 0 21px;
  cursor: pointer;
  border-radius: 4px;
}
.head_tip {
  margin: 0 0 10px 0;
  padding-bottom: 5px;
  border-bottom: 1px solid #ebeef5;
}
.head_options .sub_btn {
  height: 34px;
  border: 0;
  outline: 0;
  padding: 0 15px;
  cursor: pointer;
  border-radius: 4px;
  margin-right: 20px;
}
.pagination_box {
  padding-top: 30px;
}
.pagination_box .el-pagination {
  display: flex;
  justify-content: flex-end;
}
.order_detail {
  padding-left: 50px;
}
.order_detail .ipt_list {
  margin-bottom: 20px;
}
.order_detail .ipt_list .lable {
  width: 100px;
  margin: 0;
}
.order_detail .ipt_list .el-input {
  width: 170px;
}
.order_detail .el-input .el-input__inner {
  height: 36px;
  line-height: 36px;
}
.order_detail .ipt_list .tip {
  width: 350px;
  margin: 0 0 0 15px;
}
.order_detail .select_box {
  margin-bottom: 20px;
}
.order_detail .select_box .lable {
  width: 100px;
  margin: 0;
}
.order_detail .select_box .el-select {
  width: 170px;
}
.order_detail .radio_list {
  margin-bottom: 20px;
}
.order_detail .radio_list .lable {
  width: 100px;
  margin: 0;
}
.order_detail .div_box {
  margin-bottom: 20px;
}
.order_detail .div_box .lable {
  width: 100px;
  margin: 0;
}
.order_detail .div_box .content {
  width: 170px;
  height: 40px;
  padding-left: 15px;
  border: 1px solid #dcdfe6;
  border-radius: 4px 0 0 4px;
  transition: border 0.3s;
  box-sizing: border-box;
}
.order_detail .div_box .content:active {
  border-color: #409eff;
}
.order_detail .div_box .btn {
  width: 60px;
  height: 40px;
  border: 0;
  outline: 0;
  cursor: pointer;
  border-radius: 0 4px 4px 0;
  box-sizing: border-box;
}
.order_detail .sub_btn {
  height: 40px;
  border: 0;
  outline: 0;
  padding: 0 25px;
  cursor: pointer;
  border-radius: 4px;
  margin-right: 20px;
  margin-left: 100px;
  margin-top: 20px;
}
</style>
